<template>
	<view v-if="showPopup" class="uni-mark" :style="{ marginBottom: marginBottom !=0 ? marginBottom + 'rpx' : 0 }">
		<view :class="[ani, animation ? 'ani' : '', !custom ? 'uni-custom' : '']" class="uni-mark__mask" @click="close(true)" />
		<view :class="[type, ani, animation ? 'ani' : '', !custom ? 'uni-custom' : '']" class="uni-mark__wrapper" @click="close(true)">
            <view class="uni-mark__title" v-if ="actionType=='all'">
                <view class="uni-mark__mark-list">
                    <view class="uni-mark__list-title">{{listTitle}}</view>
                    <view class="uni-mark__mark-right" @click.stop="changeType('one-list')">
                        批量评分
                        <image mode="scaleToFill" :src="`${imgUrl}/inClass/teacher/to-mark.png`" class="uni-mark__mark-img"></image>
                    </view>
                </view>
            </view>
            <view class="uni-mark__title" v-if ="actionType=='one'">
                <view class="uni-mark__mark-title">请给[<text class="ellipsis">{{userName}}</text>]评分</view>
            </view>
            <view class="uni-mark__title" v-if ="actionType=='one-list'">
                <view class="uni-mark__mark-title">请给 [<text class="ellipsis">{{userName}}</text>等{{userNum}}人] 评分</view>
            </view>
			<view class="uni-mark__wrapper-box" @click.stop="clear" v-bind:style="{ background: defaultBgColor}">
                <view class="uni-mark__mark-box" v-if="actionType=='one'||actionType=='one-list'">
                    <view v-for="(item,index) in numArr" :key='index' class="uni-mark__mark-item">
                        <view class='uni-mark_mark-circle' :class="[tabIndex == index ? 'activeBorder' : '']" v-if="index!=numArr.length-1" @click="mark(item,index)">
                            <text class="uni-mark_mark-num" :class="[tabIndex == index ? 'activeColor' : '']">{{item}}</text>
                        </view>
                        <view class="uni-mark_mark-cancel" v-if="index==numArr.length-1" @click="cancel">
                            <text class="uni-mark_cancel-text">{{item}}</text>
                        </view>
                    </view>
                </view>
                <slot v-if="actionType=='all'"/>
            </view>
         <!-- <view  :style="{ background: 'red', width: '100%' , height: marginBottom !=0 ? marginBottom + 'rpx' : 0 }"></view> -->
        </view>
	</view>
</template>

<script>
	export default {
        // name: 'UniPopup',
        name: 'UniMark',
		props: {
			// 开启动画
			animation: {
				type: Boolean,
				default: true
			},
		     defaultBgColor:{           //是否带中间得box元素
				type: String,
				default: '#fff'
			},
			// 弹出层类型，可选值，top: 顶部弹出层；bottom：底部弹出层；center：全屏弹出层
			type: {
				type: String,
				default: 'center'
			},
			// 是否开启自定义
			custom: {
				type: Boolean,
				default: false
			},
			// maskClick
			maskClick: {
				type: Boolean,
				default: true
			},
			show: {
				type: Boolean,
				default: true
            },
            markType: {
				type: String,
				default: ''
            },
            scoreArr: {
				type: Array,
				default: []
            },
            marginBottom: { //默认离底部的间距
				type: Number,
				default: 0
            },
            defaultScore: { // 默认分数
				type: Number,
				default: 1
            },
            userName: {
				type: String,
				default: ''
            },
            listTitle: { // 列表标题
				type: String,
				default: ''
            },
            userNum: { // 默认批量评分的人数
				type: Number,
				default: 0
            }
		},
		data() {
			return {
				ani: '',
                showPopup: false,
                imgUrl:this.$CDNURL.IMGURL,
                numArr:[1,2,3,4,5,6,7,8,9,10,0],
                tabIndex:0,// 默认当前选中的tabIndex
                actionType:'',// one 单个，one-list 批量，all 全部
                point:'',// 从页面跳转过来
			}
		},
		watch: {
			show(newValue) {
				if (newValue) {
					this.open()
				} else {
					this.close()
				}
            },
            markType(newVal){
                // 当父组件的状态变化，子组件相应更新
                this.actionType = this.markType;
            },
            defaultScore(newVal){

                this.numArr.map((item,index)=>{
                    if(item == newVal){
                        this.tabIndex = index;
                    }
            })
            }
        },
		created() {
            this.actionType = this.markType;
            if(this.scoreArr.length > 0){
                let arr = [...this.scoreArr,'取消'];
                this.numArr = arr;
            }else{
                this.numArr.push('取消')
            }
            this.numArr.map((item,index)=>{
                if(item == this.defaultScore){
                    this.tabIndex = index;
                }
            })
        },
		methods: {
            // 评分
            mark(score,index) {
                // 对于取消按钮，不做高亮
                this.tabIndex = index;
                this.$emit('setScore',score);
                this.cancel();
            },
            // 取消评分
            cancel(){
                this.$emit('cancelScore');
            },
            // 已选名单点击批量评分 @click.stop 阻止事件冒泡到黑罩层的关闭事件
            changeType(type){
                this.$emit('changeType', type);
            },
			clear() {},
			open() {
				this.$emit('change', {
					show: true
				})
                this.showPopup = true
                uni.hideLoading()
				this.$nextTick(() => {
					setTimeout(() => {
						this.ani = 'uni-' + this.type
					}, 300)
				})
			},
			close(type) {
				if (!this.maskClick && type) return
				this.$emit('change', {
					show: false
				})
				this.ani = ''
				this.$nextTick(() => {
					setTimeout(() => {
						this.showPopup = false
					}, 30)
				})
			}
		}
	}
</script>
<style>
	@charset "UTF-8";

	.uni-mark {
		position: fixed;
		top: 0;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 99999;
		overflow: hidden
	}

	.uni-mark__mask {
		position: absolute;
		top: 0;
		bottom: 0;
		left: 0;
		right: 0;
		z-index: 998;
		background: rgba(0, 0, 0, .4);
		opacity: 0
	}

	.uni-mark__mask.ani {
		transition: all .3s
	}

	.uni-mark__mask.uni-bottom,
	.uni-mark__mask.uni-center,
	.uni-mark__mask.uni-top {
		opacity: 1
	}

	.uni-mark__wrapper {
		position: absolute;
		z-index: 999;
		box-sizing: border-box
	}

	.uni-mark__wrapper.ani {
		transition: all .3s
	}

	.uni-mark__wrapper.top {
		top: 0;
		left: 0;
		width: 100%;
		transform: translateY(-100%)
	}

	.uni-mark__wrapper.bottom {
		bottom: 0;
		left: 0;
		width: 100%;
		transform: translateY(100%)
	}

	.uni-mark__wrapper.center {
		width: 100%;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		transform: scale(1.2);
		opacity: 0
    }

	.uni-mark__wrapper-box {
		position: relative;
		box-sizing: border-box
	}

	.uni-mark__wrapper.uni-custom .uni-mark__wrapper-box {
        /* padding: 30upx; */
        /* padding: 16rpx 12rpx; */
		background: #fff
	}

	.uni-mark__wrapper.uni-custom.center .uni-mark__wrapper-box {
		position: relative;
		max-width: 80%;
		max-height: 80%;
        min-width: 300px;
		overflow-y: scroll
	}

	.uni-mark__wrapper.uni-custom.bottom .uni-mark__wrapper-box,
	.uni-mark__wrapper.uni-custom.top .uni-mark__wrapper-box {
		width: 100%;
		max-height: 500px;
		overflow-y: scroll
	}

	.uni-mark__wrapper.uni-bottom,
	.uni-mark__wrapper.uni-top {
		transform: translateY(0)
	}

	.uni-mark__wrapper.uni-center {
		transform: scale(1);
		opacity: 1
    }
    
    .uni-mark__title{
        width: 100%;
        height: 72rpx;
        background: #EAF6F0;
        border-radius: 20rpx 20rpx 0px 0px;

    }

    .uni-mark__title .uni-mark__mark-title{
        font-size: 24rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 500;
        color: #5F806E;
        text-align: center;
        padding: 20rpx 0 18rpx 0;
        display: flex;
        justify-content: center;
        
    }
    .uni-mark__title .uni-mark__mark-title text{
            max-width: 120rpx; 
    }

    .activeBorder{
        border: 2rpx solid #00C759 !important;    
        width: 92rpx !important;
        height: 92rpx !important;  
    }
    .activeColor{
        color: #00C759 !important;
    }
    .uni-mark__title .uni-mark__mark-list{
        font-size: 24rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 500;
        color: #5F806E;
        text-align: center;
        /* padding: 20rpx 0 18rpx 0; */
        height: 100%;
        display: flex;
        margin: 0 30rpx 0 40rpx;
        justify-content: space-between;
    }
    .uni-mark__title .uni-mark__mark-list .uni-mark__list-title{
        display: flex;
        align-items: center;
    }
    .uni-mark__title .uni-mark__mark-list .uni-mark__mark-right{
        color: #00C759;
        display: flex;
        align-items: center;
    }
    .uni-mark__title .uni-mark__mark-list .uni-mark__mark-right .uni-mark__mark-img{
        height: 32upx;
        width:32upx;
    }
    .uni-mark__wrapper-box .uni-mark__mark-box{
        /* margin: 82rpx 66rpx; */
        margin: 80rpx 60rpx 40rpx;
        display: flex;
        flex-wrap: wrap;
    }
    .uni-mark__wrapper-box .uni-mark__mark-box .uni-mark__mark-item{
        width: calc(100%/4);
        display: flex;
        justify-content: center;
        margin-bottom: 64rpx;
    }
    .uni-mark__wrapper-box .uni-mark__mark-box .uni-mark_mark-circle{
        background: #E8EBE9;
    }
    /* 取消按钮 */
    .uni-mark__wrapper-box .uni-mark__mark-box .uni-mark_mark-cancel{
        border: 2rpx solid #CDCDCD;
        background: #fff;
    }
    .uni-mark_mark-circle,.uni-mark_mark-cancel{
        width: 96rpx;
        height: 96rpx;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .uni-mark_mark-cancel .uni-mark_cancel-text{
        font-size: 28rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 500;
        color: #9D9D9D;
    }
    .uni-mark_mark-circle .uni-mark_mark-num{
        /* width: 18px;
        height: 56px; */
        font-size: 40rpx;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 500;
        color: #5F806E;
        /* line-height: 56px; */
    }

    .ellipsis {
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp:1;
        overflow: hidden;
        word-break:break-all;
     }
</style>